var header = document.querySelector('header');
header.style.transform = 'translateY(0)';


var lis = document.querySelectorAll('.nav-list li');
var content = document.querySelector('.content');
var scrollHight = content.offsetTop;
var items = document.querySelectorAll('.content .good-item');

window.onscroll = function (){
    var scrollTop = document.scrollingElement.scrollTop;
    for (var i = 0; i < items.length; i++) {
        items[i].setAttribute('data-scrollHight',items[i].offsetTop);
        if(scrollTop + 100 > items[i].offsetTop+scrollHight){
            for (var j = 0; j < lis.length; j++) {
                lis[j].className = '';
            }
            lis[i].className = 'active';
        }
    }
    for (var i = 0; i < lis.length; i++) {
        if(scrollTop + 100 > items[i].offsetTop+scrollHight){
            for (var j = 0; j < lis.length; j++) {
                lis[j].className = '';
                lis[j].setAttribute('data-Top',lis[j].offsetTop);
                lis[j].setAttribute('data-hight',lis[j].offsetHeight);
            }
            lis[i].className = 'active';
        }
           
    }
}

for(var i = 0; i < lis.length; i++){
    lis[i].index = i;
    lis[i].setAttribute('data-index',i);
    lis[i].onclick = function () {
        for(var j = 0; j < lis.length; j++){
            lis[j].className = '';
        }
        lis[this.index].className = 'active';
        document.scrollingElement.scrollTop = scrollHight + items[this.index].offsetTop-50;
    }
}
